<template>
	<view>
		<view class="head">
			<text class="v1">账户余额（元）</text>
			<view class="v2">{{money1}}</view>
			<view class="v3">￥{{money2}}待结算</view>
		</view>
		<view class="content">
			<view class="nav">
				<view class="navBar" v-for="(item, index) in navList" :key="index">
					<view :class="{'active':isActive === index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="nav-item" v-if="isActive == 0"></view>
		<view class="nav-item" v-if="isActive == 1">
			<block v-for="(item1, index1) in orderList" :key="index1">
				<view class="order">
					<view class="item1">
						<text class="bianhao">订单编号：{{item1.orderNum}}</text>
						<text class="price">+￥{{item1.price}}</text>
					</view>
					<view>
						<text class="time">{{item1.datetime}}</text>
					</view>
				</view>
			</block>
		</view>
		<view class="nav-item" v-if="isActive == 2">
			<block v-for="(item1, index1) in orderList" :key="index1">
				<view class="order">
					<view class="item1">
						<text class="bianhao">订单编号：{{item1.orderNum}}</text>
						<text class="price">+￥{{item1.price}}</text>
					</view>
					<view>
						<text class="time">{{item1.datetime}}</text>
					</view>
				</view>
			</block>
		</view>
		<view class="nav-item" v-if="isActive == 3">
			<block v-for="(item1, index1) in orderList" :key="index1">
				<view class="order">
					<view class="item1">
						<text class="bianhao">订单编号：{{item1.orderNum}}</text>
						<text class="price">+￥{{item1.price}}</text>
					</view>
					<view>
						<text class="time">{{item1.datetime}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			money1:100.235, //余额
			money2:1636.44 ,//待结算
			isActive: 2,
			navList:[
				{
					index:0,
					title:'待结算订单 (125)'
				},
				{
					index:1,
					title:'上期已结算 (145)'
				},
				{
					index:2,
					title:'收支明细'
				},
				{
					index:3,
					title:'历史账单'
				}
			],
		    orderList:[
				{
					orderNum: 48885447888889,
					price: 152.24,
					datetime: '2021-12-02 12:26:38'
				},
				{
					orderNum: 48885447888889,
					price: 152.24,
					datetime: '2021-12-02 12:26:38'
				},
				{
					orderNum: 48885447888889,
					price: 152.24,
					datetime: '2021-12-02 12:26:38'
				},
				{
					orderNum: 48885447888889,
					price: 152.24,
					datetime: '2021-12-02 12:26:38'
				}
			]
		}
	},
	methods:{
		checked(index){
			this.isActive = index
		}
	}
}
</script>
<style>
page {
	background: rgb(245, 245, 245);
}
.head {
	width: 750rpx;
	height: 324rpx;
	background: #FEB140;
	padding-top: 66rpx;
	display: flex;
	flex-direction: column;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	color: #1A1A1A;
	position: relative;
}
.v1 {
	font-size: 28rpx;
	display: flex;
	justify-content: center;
}
.v2 {
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
	font-size: 72rpx;
}
.v3 {
	display: flex;
	justify-content: center;
	font-size: 24rpx;
}
.content {
	width: 750rpx;
	height: 130rpx;
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	position: absolute;
	top: 304rpx;
	left: 0rpx;
}
.nav {
	width: 690rpx;
	margin: 50rpx 30rpx 0rpx 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.navBar {
	height: 60rpx;
	line-height: 60rpx;
/* 	text-align: center; */
	font-size: 28rpx;
	color: #666666;
}
.active {
	position: relative;
	color: #1B1B1B;
}
.active::after {
	content: '';
	position: absolute;
	background: #FEB140;
	width: 60rpx;
	height: 4rpx;
	left: 0rpx;
	right: 0rpx;
	bottom: 0rpx;
	margin: auto;
}
.nav-item {
	margin-top: 60rpx;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
}
.order {
	width: 750rpx;
	height: 123rpx;
	padding-top: 23rpx;
	padding-left: 30rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
}
.item1 {
	margin-right: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.bianhao {
	font-size: 30rpx;
	color: #1A1A1A;
}
.price {
	font-size: 28rpx;
	color: #FF3333;
	margin-right: 30rpx;
	margin-left: auto;
}
.time {
	font-size: 26rpx;
	color: #666666;
}
.activite {
	font-weight: bold;
	border-bottom: 6rpx solid #1B1B1B;
}
</style>
